<template>
  <div class="editor-functional">
    <div
      v-for="item of functions"
      :key="item.icon"
      class="functional-item"
      @click="handleClick(item.type)"
    >
      <vab-icon :icon="item.icon" style="font-size: 20px"></vab-icon>
      <br />
      <span>{{ item.title }}</span>
    </div>
    <page-edit ref="page-edit" />
    <element-add ref="element-add" />
  </div>
</template>

<script>
  import PageEdit from './PageEdit'
  import ElementAdd from './ElementAdd'
  import mixin from '@/views/editor/mixin.js'
  import { functions } from '@/views/editor/config.js'
  export default {
    name: 'EditorFunctional',
    components: {
      PageEdit,
      ElementAdd,
    },
    mixins: [mixin],
    data() {
      return {
        root: {},
        functions,
      }
    },
    computed: {
      baseUrl() {
        return this.root.baseUrl
      },
      url() {
        return this.root.topic.url
      },
    },
    methods: {
      cache() {
        this.root.setCache()
        this.$baseMessage('数据缓存成功', 'success')
      },
      clean() {
        this.$baseConfirm('你确定要清除本地未保存的数据吗?', null, () => {
          this.root.cleanCache()
          this.root.fetchData()
        })
      },
      handleView() {
        window.open(`${this.baseUrl}${this.url}`)
      },
      handleClick(type) {
        switch (type) {
          case 'page':
            this.$refs['page-edit'].showEdit()
            break
          case 'cache':
            this.cache()
            break
          case 'clean':
            this.clean()
            break
          case 'add':
            this.$refs['element-add'].showEdit()
            break
          case 'save':
            this.root.handleEdit()
            break
          case 'view':
            this.handleView()
            break
        }
      },
    },
  }
</script>

<style scoped>
  .editor-functional {
    width: 50px;
    box-sizing: border-box;
    height: 100%;
    border-right: 1px solid #425668;
  }

  .functional-item {
    box-sizing: border-box;
    height: 80px;
    border-bottom: 1px solid #425668;
    text-align: center;
    line-height: 30px;
    padding: 10px 0;
    cursor: pointer;
  }
</style>
